﻿<!-- 2017-12-4 14:24:14 | 修改 木遥（微信:  http://marsgis.cn/weixin.html ） -->
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title></title>

    <!--第三方lib-->
    <script type="text/javascript" src="../../lib/include-lib.js?time=20201005" libpath="../../lib/"
            include="jquery,font-awesome,bootstrap,layer,haoutil,echarts"></script>

    <link href="../../css/widget-win.css" rel="stylesheet" />
    <style>
        body {
            padding: 5px;
            text-align: center;
        }

        .form-control {
            width: 150px;
        }
    </style>
</head>
<body>
    <div class="btn-group" role="group">
        <button id="btnSkyline" type="button" class="btn btn-primary">提取天际线</button>
        <button id="btnClear" type="button" class="btn btn-danger">清除</button>
    </div>

    <div id="echartsView1" style="width:100%;height:100%;"></div>

    <script>
        var thisWidget;
        var myChart;

        //当前页面业务
        function initWidgetView(_thisWidget) {
            thisWidget = _thisWidget;

            if (thisWidget.config && thisWidget.config.style) {
                $("body").addClass(thisWidget.config.style);
            }

            //用echarts绘制二维天际线
            myChart = echarts.init(document.getElementById('echartsView1'), 'dark');
            updateEchars({ x: [], y: [] });

            $("#btnSkyline").click(function () {
                thisWidget.getSkyline();
            });
            $("#btnClear").click(function () {
                thisWidget.clear();
                updateEchars({ x: [], y: [] });
            });
        }

        function updateEchars(object) {
            if (object == null || object.x == null || object.y == null) return;

            var option = {
                tooltip: {
                    trigger: "axis",
                    formatter: function (params) {
                        var inhtml = "";
                        for (var i in params) {
                            var item = params[i];
                            if (item == null || item.value == null) continue;
                            
                            inhtml += item.value.toFixed(3) + "<br />" + Number(item.axisValue).toFixed(3) + "<br />";
                        }
                        return inhtml;
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        data: object.x,
                        show: false
                    }
                ],
                yAxis: [
                    {
                        type: "value",
                        min: 0,
                        max: 1
                    }
                ],
                series: [
                    {
                        name: "",
                        type: "line",
                        data: object.y
                    }
                ]
            }
            myChart.setOption(option);
        }


    </script>
</body>
</html>
